<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="author" content="Night">
  <!-- 移动端适配 -->
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
  <!-- 重置css -->
  <link rel="stylesheet" type="text/css" href="./css/reset.css"/>
  <!-- rem.js -->
  <script type="text/javascript" src="./js/winResponsive.js"></script>
  <!-- index.css -->
  <link rel="stylesheet" type="text/css" href="./css/product-list.css">
  <link rel="stylesheet" type="text/css" href="./css/common.css">
  <title>Bee Mall_product-list</title>
  <style>
    .tab_content div{
        display: none;
    }
    .tab_content div.cur{
        display: block!important;
    }
    .tab a.cur{ 
			background: orange;
		}
  </style>
 </head>
 <body>
   <!-- header start -->
   <header>
        <div class="container">
                <div class="logo">
                    <a href="#">
                        <img src="./images/bee_03.png" alt="">
                    </a>
                </div>
                <div class="search">
                    <img src="./images/search_06.png" alt="">
                    <form action="#">
                        <input type="text" name="keywords" placeholder="输入商家、分类或商圈"/>
                    </form>
                </div>
                <a href="#" class="saoyisao">
                    <img src="./images/saoyisao_06.png" alt="">
                </a>
                <a href="#" class="info">
                    <img src="./images/clock_08.png" alt="">
                </a>
        </div> 

   </header>
   <section class="content clear">
        <aside class="tab">
            <a href="#">优选水果</a>
            <a href="#">煎饼烧麦</a>
            <a href="#">爆米花</a>
        </aside>
        <section class="tab_content">
            <div class="goods cur">
            <h2>优选水果</h2>
            <ul>
                <li>
                    <img src="./images/shuiguo_03.png" alt="">
                    <div class="description">
                        <span>精选</span>
                        <span>爱鲜蜂-佳沛绿奇异果</span>
                        <p>买一赠一</p>
                        <p><span>3</span><span>粒/盒</span></p>
                        <p><span>￥</span><span>16.9</span></p>
                    </div>
                    <div class="btn">+</div>
                </li>
                <li>
                    <img src="./images/shuiguo_03.png" alt="">
                    <div class="description">
                        <span>精选</span>
                        <span>爱鲜蜂-佳沛绿奇异果</span>
                        <p>买一赠一</p>
                        <p><span>3</span><span>粒/盒</span></p>
                        <p><span>￥</span><span>16.9</span></p>
                    </div>
                    <div class="btn">+</div>
                </li>
                <li>
                    <img src="./images/shuiguo_03.png" alt="">
                    <div class="description">
                        <span>精选</span>
                        <span>爱鲜蜂-佳沛绿奇异果</span>
                        <p>买一赠一</p>
                        <p><span>3</span><span>粒/盒</span></p>
                        <p><span>￥</span><span>16.9</span></p>
                    </div>
                    <div class="btn">+</div>
                </li>
                <li>
                    <img src="./images/shuiguo_03.png" alt="">
                    <div class="description">
                        <span>精选</span>
                        <span>爱鲜蜂-佳沛绿奇异果</span>
                        <p>买一赠一</p>
                        <p><span>3</span><span>粒/盒</span></p>
                        <p><span>￥</span><span>16.9</span></p>
                    </div>
                    <div class="btn">+</div>
                </li>
                <li>
                    <img src="./images/shuiguo_03.png" alt="">
                    <div class="description">
                        <span>精选</span>
                        <span>爱鲜蜂-佳沛绿奇异果</span>
                        <p>买一赠一</p>
                        <p><span>3</span><span>粒/盒</span></p>
                        <p><span>￥</span><span>16.9</span></p>
                    </div>
                    <div class="btn">+</div>
                </li>
                <li>
                    <img src="./images/shuiguo_03.png" alt="">
                    <div class="description">
                        <span>精选</span>
                        <span>爱鲜蜂-佳沛绿奇异果</span>
                        <p>买一赠一</p>
                        <p><span>3</span><span>粒/盒</span></p>
                        <p><span>￥</span><span>16.9</span></p>
                    </div>
                    <div class="btn">+</div>
                </li>
            </ul>
            </div>
            <div class="goods">
                <h2>煎饼果子</h2>
                <ul>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                </ul>
            </div>
            <div class="goods">
                <h2>爆米花</h2>
                <ul>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                    <li>
                        <img src="./images/shuiguo_03.png" alt="">
                        <div class="description">
                            <span>精选</span>
                            <span>爱鲜蜂-佳沛绿奇异果</span>
                            <p>买一赠一</p>
                            <p><span>3</span><span>粒/盒</span></p>
                            <p><span>￥</span><span>16.9</span></p>
                        </div>
                        <div class="btn">+</div>
                    </li>
                </ul>
            </div>
        </section>
        
   </section>
   
   <!-- footer start -->
   <footer>
        <a href="#">
            <img src="./images/wode_39.png" alt="">
            <p>闪送超市</p>
        </a>
        <a href="#">
            <img src="./images/wode_39.png" alt="">
            <p>闪送超市</p>
        </a>
        <a href="#">
            <img src="./images/wode_39.png" alt="">
            <p>闪送超市</p>
        </a>
        <a href="#">
            <img src="./images/wode_39.png" alt="">
            <p>闪送超市</p>
        </a>
   </footer>
  <script src="js/zepto.js"></script>
   <script>
    let tabli = document.querySelectorAll('.tab a');
    let contentli = document.querySelectorAll('.tab_content .goods');
    console.log(contentli)
    let len = tabli.length;
    for (let i = 0; i < len; i++) {
         tabli[i].index = i;
         tabli[i].onclick =function(){
             //先初始化
             for(let j = 0; j <len;j++){
                //选项要与内容长度一致
                 tabli[j].className='';
                 contentli[j].style.display='none';
                 console.log( contentli[j]);
             }
 
             this.className='cur';
             contentli[this.index].style.display='block';
         }
    }

    
    </script>
 </body>
 </html>